<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  /* 第一种flex 布局 */
  .container {
    display: flex;
    /* flex-shrink: 0; */
  }

  /* flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 */
  .left {
    flex-basis: 300px;
  }

  /* flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 */
  /* 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。 */
  .right {
    /* flex-grow: 1; */
  }

  /* 第二种 float布局 */
  /* .left {
    float: left;
  }

  .right {
    margin-left: 200px;
  } */

</style>
<body>
  <h3>css 如何实现左侧固定300px，右侧自适应的布局</h3>
  <div class="container">
    <div class="left">左边</div>
    <div class="right">右边</div>
  </div>
</body>
</html>